<template>
  <div ref="table" class="table-view">
    <h1>{{title}}</h1>
    <table border="1" cellspacing="0" cellpadding="0">
      <tr>
        <th v-for="title in titles">{{title.value}}</th>
      </tr>
      <tr v-for="list in dataSource">
        <td v-for="(cell,index) in titles" v-bind:class="{'link': index== titles.length-1 && isLink}">{{list[cell.key]}}
          <span class="agent_detail" @click="nextToDetail(list['user_id'])" v-if="index== titles.length-1 && isLink">>></span>
        </td>
      </tr>
    </table>
    <div class="table_btn" ref="tableBtn">
      <button @click="previous" :disabled="previousEnable">上一页</button>
      <button @click="next" :disabled="nextEnable">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLink: false,
      nextEnable: false,
      currentPage: 1
    };
  },
  props: ["link", "title", "titles", "dataSource", "maxPage", "always"],
  created() {
    if (this.link == "") {
      this.isLink = true;
    }
  },
  mounted() {
    if (this.always !== undefined) {
      this.$refs.table.style.display = "block";
    }
  },
  updated() {
    if (this.dataSource.length) {
      this.$refs.table.style.display = "block";
    }
    if (this.maxPage == this.currentPage) {
      this.nextEnable = true;
    } else {
      this.nextEnable = false;
    }
    if (this.maxPage <= 1) {
      this.$refs.tableBtn.style.display = "none";
    }
  },
  computed: {
    previousEnable() {
      if (this.currentPage <= 1) {
        return true;
      }
      return false;
    }
  },
  methods: {
    previous() {
      this.currentPage -= 1;
      this.$emit("previous", this.currentPage);
    },
    next() {
      this.currentPage += 1;
      this.$emit("next", this.currentPage);
    },
    nextToDetail(id) {
      this.$router.push({
        path: "agentDetail",
        query: {
          id: id
        }
      });
    }
  }
};
</script>
<style scoped>
.table-view {
  background-color: #fff;
  border-top: 1px solid #d7d7d7;
  display: none;
  padding: 0.22rem;
  color: var(--word-color);
}
table {
  text-align: center;
  width: 100%;
}
th {
  font-weight: normal;
}
h1 {
  font-size: 0.32rem;
  margin-bottom: 0.22rem;
}
.table_btn {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem;
}
.table_btn button {
  color: #0085e7;
  font-size: 0.32rem;
}
.table_btn button:disabled {
  opacity: 0.65;
}
.link {
  padding: 0 0.1rem;
}
.agent_detail {
  color: green;
  font-size: 0.25rem;
}
</style>

